<template>
  <div ref="divRef" style="height: 600px" />
</template>

<script setup lang="ts">
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";
import { onMounted, onUnmounted, ref, defineProps } from "vue";

const divRef = ref();
let aiEditor: AiEditor | null = null;
const props = defineProps({
  disabled: {
    type: Boolean,
    required: true, // 如果希望此prop必须提供，可以设置为required
  },
});
const model = defineModel();
onMounted(() => {
  aiEditor = new AiEditor({
    element: divRef.value as Element,
    placeholder: "点击输入内容...",
    content: model.value,
    toolbarKeys: [
      "undo",
      "redo",
      "brush",
      "eraser",
      "|",
      "heading",
      "font-family",
      "font-size",
      "|",
      "bold",
      "italic",
      "underline",
      "strike",
      "link",
      "code",
      "subscript",
      "superscript",
      "hr",
      "todo",
      "emoji",
      "|",
      "highlight",
      "font-color",
      "|",
      "align",
      "line-height",
      "|",
      "bullet-list",
      "ordered-list",
      "indent-decrease",
      "indent-increase",
      "break",
      "|",
      "image",
      "video",
      "attachment",
      "quote",
      "code-block",
      "table",
      "|",
      "printer",
      "fullscreen",
    ],
    editable: !props.disabled,
    onChange: (aiEditor) => {
      // 监听到用编辑器内容发生变化了，控制台打印编辑器的 html 内容...
      model.value = aiEditor.getHtml();
    },
  });
});

onUnmounted(() => {
  aiEditor && aiEditor.destroy();
});
</script>